
import React from 'react'

//地区折线柱状图
export const Option=()=>{
  return{
  	tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        data:['区域','趋势'],
         orient: 'horizontal',
        x: 'left',
        left:15,
    },
    xAxis: [
        {
          type: 'category',
          data: ['中区','西区','南区','东区','北区'],
        }
    ],
    yAxis: {
    	type:'value',
    	 axisPointer: {
              show: true,
              label:{
          			formatter:"{value}"
          	}
          }
    },
   series: [{
        type: 'line',
        data:[7000, 1200, 5000, 3000, 2000],
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle:{
        	normal:{
        		color:"rgb(97,202,222)"
        	}
        }
        
    },
    {
        type: 'line',
        data:[7000, 1200, 5000, 3000, 2000],
        symbolSize: 5, 
        color: ['#ccc'],
        smooth: true,
	        showSymbol: false,
	        symbol: 'circle',
	        symbolSize: 6,
           areaStyle: {
            normal: {
                color:"rgb(97,202,222)",
            }
          },
          itemStyle:{
        	normal:{
        		color:"rgb(99,203,222)"
        	}
        }
    }]
   }
}

//地区圆环图
export const regionalPie=(newData,color)=>{
	
	return{
	legend: {
        orient: 'horizontal',
      x: 'left',
      left:15,	
      data:['区域']
    },
		series:[{
			name: '',
      type: 'pie',
      radius: ['80%', '100%'],
      label: {
          normal: {
              position: 'center'
          }
      },
      data: [{
          value: 20,
          name: '占有率',
          label: {
            normal: {
              formatter: '{d} %',
              textStyle: {
              	padding:[30,0,0,0],
                fontSize: 30,
                color:'#6D6D6D',
                 	
              }
            }
          },
          itemStyle:{
          	normal:{
          		color:color,
          	}
          }
      }, {
          value: 80,
          label: {
            normal: {
              textStyle: {
              	padding:null,
                color: 'rgb(241,241,241)',
                fontSize: 16,
              }
            }
          },
          tooltip: {
              show: false
          },
          itemStyle: {
            normal: {
              color: 'rgb(241,241,241)',
          	},
          	emphasis: {
              color: 'rgb(241,241,241)',
            }
          },
          hoverAnimation: false
      }]
		}]
	}
}

//正负条形

export const targetSell=()=>{
	
	return{
		tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['签单数', '收款', '支出'],
        algin:'left',
        left:15,
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'value'
        }
    ],
    yAxis : [
        {
            type : 'category',
            axisTick : {show: true},
            data : ['东区','南区','西区','中区','北区']
        }
    ],
    series : [
        {
	        name:'签单数',
	        type:'bar',
	        stack: '总量',
	        label: {
	            normal: {
	                show: true
	               
	            }
	        },
	        data:[300, 270, 340, 344, 300],
	        itemStyle:{
          	normal:{
          		color:'rgb(248,208,72)'
          	}
          }
        },
        {
          name:'收款',
          type:'bar',
          stack: '总量',
          label: {
              normal: {
                  show: true,
                  position: 'inside'
              }
          },
          data:[120, 102, 141, 174, 190],
          itemStyle:{
          	normal:{
          		color:'rgb(135,201,62)'
          	}
          }
        },
        {
          name:'支出',
          type:'bar',
          stack: '总量',
          label: {
              normal: {
                  show: true,
                  position: 'left'
              }
          },
          data:[-20, -302, -21, -34, -20],
          itemStyle:{
          	normal:{
          		color:"rgb(97,202,222)"
          	}
          }
        }
    ]
	}
}

//区域客户数量条形图对比

export const areaClient=()=>{
	
	return{
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ['报备数量', '签单数量', '回款数量'],
        align: 'left',
        left: 15
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['东区', '西区', '中区', '南区', '北区']
    }],
    yAxis: [{
        type: 'value',
        name: '(单)',
        axisLabel: {
            formatter: '{value}'
        }
    }],
    series: [{
        name: '报备数量',
        type: 'bar',
        data: [20, 12, 31, 34, 31],
        itemStyle:{
        	normal:{
        		color:'rgb(248,208,72)'
        	}
        }
    }, {
        name: '签单数量',
        type: 'bar',
        data: [10, 20, 5, 9, 3],
        itemStyle:{
        	normal:{
        		color:'rgb(135,201,62)'
        	}
        }
    }, {
        name: '回款数量',
        type: 'bar',
        data: [1, 1, 2, 3, 1],
        itemStyle:{
        	normal:{
        		color:"rgb(97,202,222)"
        	}
        }
    }]
	}
}

//刊位使用
export const issueUse=()=>{
	return{
		tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)",

    },
    legend: {
      data:['公益广告','商业广告','空闲'],
      align: 'left',
      left: 15
    },
    series: [
        {
          name:'使用占比',
          type:'pie',
          hoverAnimation: false,
          legendHoverLink:false,
          radius: ['40%', '42%'],
          color: ['rgb(97,202,222)', 'rgb(135,201,62)', 'rgb(248,208,72)'],
          label: {
            normal: {
                position: 'inner'
            }
          },
          labelLine: {
            normal: {
                show: false
            },
          },
          tooltip: {
           show:false,
             
          },
          
          data:[
            {value:435, name:''},
            {value:679, name:''},
            {value:848, name:''},
          ]
      },
      {
        name:'使用占比',
        type:'pie',
        radius: ['42%', '55%'],
        color: ['rgb(97,202,222)', 'rgb(135,201,62)', 'rgb(248,208,72)'],
        label: {
            normal: {
                formatter: '{b}\n{d}%'
            },
      
        },
        data:[
            {value:435, name:'公益广告'},
            {value:679, name:'商业广告'},
            {value:848, name:'空闲'},
        ]
      }
    ]
	}
}


export const issueNumber=()=>{
	return{
		tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      data: ['商业广告上刊率','刊位使用率'],
      align:"left",
      left:15,
    },
    series : [
        {
          name: '使用占比',
          type: 'pie',
          radius : '55%',
          center: ['50%', '50%'],
          color:['rgb(97,202,222)','rgb(248,208,72)'],
          data:[
              {value:335, name:'商业广告上刊率'},
              {value:310, name:'刊位使用率'},
          ],
          label: {
            normal: {
                formatter: '{b}\n{d}%'
            },      
        },
          itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
      }
    ]
	}
}
